<template>
  <Row>
    <Col span="17">
    <div class="showBox" style="overflow: scroll">
      <canvas ref="canvasRef" width="2000" height="1000" id="drawing">
        Canvas
      </canvas>
    </div>
    </Col>
    <Col span="7">
    <introduce>顺序表</introduce>
    <save @get_local_data="get_local_data_func" @get_cloud_data="get_cloud_data_func" @save_data="save_data_func"></save>
    <control @control_speed="speed_func" @control_scale="scale_func" @control_scale_reset="scale_reset"></control>
    <orderlist_menu @list_init="init_list" @list_insert="insert" @list_delete="Delete"></orderlist_menu>
    <chatgpt @call_gpt_emit="show_gpt"></chatgpt>
    <note @call_note_emit="show_note"></note>
    </Col>
  </Row>
  <Drawer title="AI助理" placement="right" :closable="false" v-model="gpt" width="30">
    <chatgpt_main></chatgpt_main>
  </Drawer>
  <Drawer title="学习笔记" placement="bottom" :closable="false" v-model="notes" height="70">
    <note_main></note_main>
  </Drawer>
</template>

<script setup>
import control from "@/components/control.vue";
import orderlist_menu from "@/components/list/orderlist_menu.vue";
import note from "@/components/note.vue";
import chatgpt from "@/components/chatgpt.vue";
import chatgpt_main from "@/components/chatgpt/chatgpt_main.vue";
import note_main from "@/components/markdown_note/note_main.vue";
import introduce from "@/components/introduce.vue";
import save from "@/components/save.vue";
import { ref, onMounted } from "vue";
import Qs from 'qs'
import {
  speed_func_control,
  scale_func_control,
  scale_reset_control
} from "@/assets/js/play_control.js";
import {
  init,
  list_init_index,
  list_insert_index,
  list_delete_index,
} from "@/assets/js/list/OrderList.js";

const canvasRef = ref(null);
var drawing_size = {
  width: 0,
  height: 0,
};
const ctx = ref(null);
// 初始化页面
onMounted(() => {
  // canvasRef只是个引用,需要通过.value来获取值,才可以当作html中的canvas来进行使用
  // 获取画布的大小
  drawing_size.width = canvasRef.value.width;
  drawing_size.height = canvasRef.value.height;
  // console.log(`成功渲染出组件!`)
  // console.log(drawing_size)
  init(drawing_size);
  ctx.value = canvasRef.value.getContext("2d");
  
});
// 播放速度
function speed_func(play_speed) {
  speed_func_control(play_speed);
}
// 画布缩放
function scale_func(canvas_scale) {
  scale_func_control(canvas_scale, ctx.value, drawing_size);
}
// 恢复
function scale_reset(canvas_scale) {
  scale_reset_control(canvas_scale, ctx.value, drawing_size);
}

// 具体操作
function init_list(init_value) {
  // 因为是const引用,所以只能通过相互赋值进行传递参数
  localStorage.setItem('linear_action_list', '');  // 因为 init后，此前的action就没有用了，因此清楚local_storage中已存的action
  list_init_index(init_value.value);
  const new_action_list = localStorage.getItem('linear_action_list') + `(init,${init_value.value});`;
  // console.log(typeof init_value.value)
  localStorage.setItem('linear_action_list', new_action_list);
}
function insert(insert_index, insert_value) {
  list_insert_index(insert_index.value, insert_value.value);
  const new_action_list = localStorage.getItem('linear_action_list') + `(insert,${insert_index.value},${insert_value.value});`;
  localStorage.setItem('linear_action_list', new_action_list);
}
function Delete(delete_value) {
  list_delete_index(delete_value.value);
  const new_action_list = localStorage.getItem('linear_action_list') + `(delete,${delete_value.value});`;
  localStorage.setItem('linear_action_list', new_action_list);
}

// 显示gpt
const gpt = ref(false);
function show_gpt() {
  gpt.value = true;
}

// 显示notes
const notes = ref(false);
function show_note() {
  notes.value = true;
}

// 获取本地学习记录
function get_local_data_func() {
  // "(init,3);(insert,0,1);(insert,1,2);(delete,1)"
  const data = localStorage.getItem('linear_action_list');
  console.log(data)
  if(!data){
    return;
  }
  let actions = data.split(";");
  console.log(actions)

  for(let i=0; i<actions.length; i++){
    let single_action = actions[i].substring(1,actions[i].length-1).split(',');
    // console.log(single_action[0])
    if (single_action[0] == "init"){
      list_init_index(single_action[1]);
      // console.log(single_action[0], single_action[1]);
    } else if (single_action[0] == "insert"){
      list_insert_index(single_action[1], single_action[2]);
      // console.log(single_action[0], single_action[1], single_action[2]);
    } else if (single_action[0] == "delete"){
      list_delete_index(single_action[1]);
      // console.log(single_action[0], single_action[1]);
    } else{
    }
  }
}
import {getCurrentInstance} from "vue"
const {proxy} = getCurrentInstance()

// 获取云端数据
function get_cloud_data_func(){

  proxy.$http.get('/download_action',{params:{
        username:localStorage.getItem('name'),
        type:"linearList",
      }
  })
  .then((response)=> {
    if(response.data == ""){
      alert("没有云端数据！")
    } else{
      localStorage.setItem('linear_action_list', response.data);
      get_local_data_func();
    }   
    })
  .catch(function (error) {
    console.log(error)
    })
}

// 保存数据到云端
function save_data_func(){
  let params = {
    username:localStorage.getItem('name'),
        type:"linearList",
        setUpTime:"0",
        actionList:localStorage.getItem('linear_action_list'),
        };
  console.log(localStorage.getItem('linear_action_list'))
  proxy.$http.post('/upload_action',Qs.stringify(params)
  )
  .then((response)=> {
    alert("保存成功！")
    })
  .catch(function (error) {
    console.log(error)
    })
}


</script>

<style>
@import url("@/assets/css/index.css");
</style>
